import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import Titles from "@/components/Titles";
import city from "@/enums/city";
import { Button, Cascader, Form, Input, message } from "antd";
import { useState } from "react";
import { useTabsContext } from "@/contexts/TabsContext";
import { changeUserList } from "@/api/modules/user";

const shopCar = () => {
	const [formVal, setFormVal] = useState<any>({});
	console.log(formVal);
	const { delTabs } = useTabsContext();
	const [from] = Form.useForm();
	const onFinish = async (values: any) => {
		let citys = "";
		values?.city.forEach((item: any) => {
			item && (citys += item + " ");
		});
		const city = values?.city ? citys : "";
		await changeUserList({
			code: values?.code,
			name: values?.name,
			telephone: values?.telephone,
			address: city,
			description: values?.address
		});
		message.success("新增成功");
		setFormVal(values);
		delTabs("/userManage/add");
	};
	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	const submit = () => {
		from.submit();
	};

	return (
		<LayoutWhite>
			<Title word={"新增用户"} more={moreButton()} />
			<Titles title={"基本信息"} />
			<Form
				name="basic"
				form={from}
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 8 }}
				style={{ width: "100%", padding: "20px 0px" }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={() => message.info("请输入必填项")}
				autoComplete="off"
			>
				<Form.Item label="用户编码" name="code" rules={[{ required: true, message: "请输入用户编码" }]}>
					<Input placeholder="请输入用户编码" />
				</Form.Item>

				<Form.Item label="用户名称" name="name" rules={[{ required: true, message: "请输入用户名称" }]}>
					<Input placeholder="请输入用户名称" />
				</Form.Item>

				<Form.Item label="用户账号" name="telephone" rules={[{ required: true, message: "请输入用户账号" }]}>
					<Input placeholder="请输入用户账号" />
				</Form.Item>
				<Form.Item label="位置信息" name="city">
					<Cascader options={city} placeholder="请选择位置" />
				</Form.Item>
				<Form.Item label="详细地址" name="address">
					<Input.TextArea placeholder="请输入详细地址" style={{ height: "80px" }} />
				</Form.Item>
			</Form>
			<Title word={""} more={moreButton()} />
			<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
				<Button style={{ marginRight: "30px" }} onClick={() => delTabs("/userManage/add")}>
					返回
				</Button>
				<Button type="primary" onClick={() => submit()}>
					确认保存
				</Button>
			</div>
		</LayoutWhite>
	);
};

export default shopCar;
